<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>注册统计</title>
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="$request.getContextPath()/resources/jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/bootstrap/js/bootstrap.min.js"></script>

<script src="$request.getContextPath()/resources/highcharts/highcharts.js"></script>
<script src="$request.getContextPath()/resources/highcharts/modules/exporting.js"></script>

<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/layui/css/layui.css">
<script type="text/javascript" src="$request.getContextPath()/resources/layui/layui.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/layui/lay/modules/element.js"></script>
<style type="text/css">
body,.container-fluid{
   width: 100%;
   height: 100%;
   position: absolute;
   padding:0px;
   margin:0px;
}
.container-fluid .layui-tab,
.container-fluid .layui-tab .layui-tab-content,
.container-fluid .layui-tab .layui-tab-content .layui-tab-item{
   width: 100%;
   height: 100%;
   padding:0px;
   margin:0px;
   border:0px;
}
#weekContainer,#monthContainer,#yearContainer{
   width: 100%;
   height: 90%;
   padding:0px;
   margin:0px;
}
.highcharts-credits{
   visibility: hidden;
}
</style>
<script type="text/javascript">
$(function () {
    $('#weekContainer').highcharts({
        title: {
            text: '一周注册统计',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: ['周一', '周二', '周三', '周四', '周五', '周六','周七']
        },
        yAxis: {
            title: {
                text: '注册人数(个)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '人'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '一周',
            data: [1, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2]
        }]
    });
    //月统计
    $('#monthContainer').highcharts({
        title: {
            text: '一月注册统计',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: ['周一', '周二', '周三', '周四', '周五', '周六','周七']
        },
        yAxis: {
            title: {
                text: '注册人数(个)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '人'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '一月',
            data: [1, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2]
        }]
    });
    //月统计
    $('#yearContainer').highcharts({
        title: {
            text: '一年注册统计',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: ['一月', '二月', '三月', '四月', '五月', '六月','七月']
        },
        yAxis: {
            title: {
                text: '注册人数(个)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '人'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: '一月',
            data: [1, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2]
        }]
    });
});
</script>
</head>
<body>
<div class="container-fluid">
	<div class="layui-tab layui-tab-card">
		<ul class="layui-tab-title">
			<li class="layui-this">周注册量</li>
			<li>月注册量</li>
			<li>年注册量</li>
		</ul>
	    <div class="layui-tab-content">
			<div class="layui-tab-item layui-show">
				<div id="weekContainer"></div>
			</div>
			<div class="layui-tab-item">
				<div id="monthContainer"></div>
			</div>
			<div class="layui-tab-item">
			    <div id="yearContainer"></div>
			</div>
	     </div>
	</div>	           
</div>
</body>
</html>